<template>
  <!-- 文章分类 -->
  <div class=" w-full p-4 mb-3 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
    <!-- 分类标题 -->
    <h2 class=" flex items-center mb-2 font-bold text-gray-900 uppercase dark:text-white">
      <svg t="1710663177751" class="icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="6244" width="200" height="200">
        <path
            d="M585.1648 905.1648c-19.8144 0-35.84-16.0256-35.84-35.84v-283.392c0-19.8144 16.0256-35.84 35.84-35.84s35.84 16.0256 35.84 35.84v283.392c0 19.7632-16.0768 35.84-35.84 35.84zM728.9344 905.1648c-19.8144 0-35.84-16.0256-35.84-35.84v-283.392c0-19.8144 16.0256-35.84 35.84-35.84s35.84 16.0256 35.84 35.84v283.392c0 19.7632-16.0768 35.84-35.84 35.84zM875.7248 905.1648c-19.8144 0-35.84-16.0256-35.84-35.84v-283.392c0-19.8144 16.0256-35.84 35.84-35.84s35.84 16.0256 35.84 35.84v283.392c0 19.7632-16.0768 35.84-35.84 35.84z"
            fill="#FEC963" p-id="6245"></path>
        <path
            d="M234.4448 481.1776h174.7456c35.328 0 64-28.672 64-64v-175.104c0-35.328-28.672-64-64-64H221.5424c-28.2112 0-51.0976 22.8864-51.0976 51.0976v188.0576c0.0512 35.328 28.672 63.9488 64 63.9488zM860.16 178.0736h-187.648c-28.2112 0-51.0976 22.8864-51.0976 51.0976v188.0576c0 35.328 28.672 64 64 64H860.16c35.328 0 64-28.672 64-64v-175.104c0-35.3792-28.672-64.0512-64-64.0512zM410.9824 619.1104H223.3344c-28.2112 0-51.0976 22.8864-51.0976 51.0976v188.0576c0 35.328 28.672 64 64 64h174.7456c35.328 0 64-28.672 64-64v-175.104c0-35.4304-28.672-64.0512-64-64.0512z"
            fill="#9bc6fc" p-id="6246"></path>
        <path
            d="M390.3488 105.0624h-224.768c-38.8096 0-70.4 31.5904-70.4 70.4v224.768c0 38.8096 31.5904 70.4 70.4 70.4h224.768c38.8096 0 70.4-31.5904 70.4-70.4v-224.768c0.0512-38.8608-31.5392-70.4-70.4-70.4zM414.72 400.2304c0 13.4144-10.9056 24.32-24.32 24.32h-224.768c-13.4144 0-24.32-10.9056-24.32-24.32v-224.768c0-13.4144 10.9056-24.32 24.32-24.32h224.768c13.4144 0 24.32 10.9056 24.32 24.32v224.768zM390.3488 546.6112h-224.768c-38.8096 0-70.4 31.5904-70.4 70.4v224.768c0 38.8096 31.5904 70.4 70.4 70.4h224.768c38.8096 0 70.4-31.5904 70.4-70.4v-224.768c0.0512-38.8096-31.5392-70.4-70.4-70.4zM414.72 841.7792c0 13.4144-10.9056 24.32-24.32 24.32h-224.768c-13.4144 0-24.32-10.9056-24.32-24.32v-224.768c0-13.4144 10.9056-24.32 24.32-24.32h224.768c13.4144 0 24.32 10.9056 24.32 24.32v224.768zM841.6256 105.0624h-224.768c-38.8096 0-70.4 31.5904-70.4 70.4v224.768c0 38.8096 31.5904 70.4 70.4 70.4h224.768c38.8096 0 70.4-31.5904 70.4-70.4v-224.768c0-38.8608-31.5904-70.4-70.4-70.4z m24.32 295.168c0 13.4144-10.9056 24.32-24.32 24.32h-224.768c-13.4144 0-24.32-10.9056-24.32-24.32v-224.768c0-13.4144 10.9056-24.32 24.32-24.32h224.768c13.4144 0 24.32 10.9056 24.32 24.32v224.768zM571.4944 545.5872a23.04 23.04 0 0 0-23.04 23.04v317.3888c0 12.7488 10.2912 23.04 23.04 23.04s23.04-10.2912 23.04-23.04v-317.3888c0-12.7488-10.2912-23.04-23.04-23.04zM719.0528 545.5872a23.04 23.04 0 0 0-23.04 23.04v317.3888c0 12.7488 10.2912 23.04 23.04 23.04s23.04-10.2912 23.04-23.04v-317.3888a23.04 23.04 0 0 0-23.04-23.04zM866.56 545.5872a23.04 23.04 0 0 0-23.04 23.04v317.3888c0 12.7488 10.2912 23.04 23.04 23.04s23.04-10.2912 23.04-23.04v-317.3888c0-12.7488-10.2912-23.04-23.04-23.04z"
            fill="#474747" p-id="6247"></path>
      </svg>
      分类
    </h2>
    <!-- 分类列表 -->
    <span v-for="item in categoryList" :key="item.id"
          @click="gotoCategory(item.id, item.name)"
          :class="[item.id == currentCategoryId ? 'bg-gray-200 dark:bg-gray-800 dark:border-gray-700' : 'bg-white dark:bg-gray-700 dark:border-gray-700']"
          class="rounded-[10px] cursor-pointer inline-block mb-1 border-2 border-gray-150 dark:border-gray-150 text-grey-950 text-1.5xl font-medium mr-4 mt-3 px-2.5 py-0.5 hover:bg-gray-100 dark:text-blue-300">
      {{ item.name }} <span
        class="inline-flex items-center justify-center w-6 h-6 ms-2 text-1xl font-semibold text-sky-800 bg-indigo-100 rounded-full">
      <CountTO :value="item.num" text-style="text-1xl font-semibold"/>
    </span>
    </span>
  </div>
</template>

<script setup>
import {queryCategoryList} from "@/api/frontend/category.js"
import {onMounted, ref, watch, watchEffect} from "vue"
import {useRoute, useRouter} from "vue-router";
import CountTO from "@/components/CountTO.vue";

const router = useRouter()
const route = useRoute()
const categoryList = ref([])
const currentCategoryId = ref()

onMounted(() => {
  const path = route.fullPath.split("?")
  if (path[0] == "/category/article/list") {
    currentCategoryId.value = route.query.id
  }
  getCategoryList()
})

function getCategoryList() {
  queryCategoryList().then(resp => {
        if (resp.success) {
          categoryList.value = resp.data
        }
      }
  )
}

const gotoCategory = (id, name) => {
  router.push({path: "/category/article/list", query: {id, name}})
  currentCategoryId.value = id
}
</script>